---
title: Структура проекта
description: Введение в основы файловой структуры Astro-проекта.
i18nReady: true
---
import { FileTree } from '@astrojs/starlight/components';

Ваш новый Astro-проект, созданный с помощью команды `create-astro`, уже включает в себя некоторые файлы и папки. Другие вы создадите сами и добавите в существующую файловую структуру.

Ниже описано как Astro организован и какие файлы вы найдете в своем новом проекте.

## Директории и Файлы

Astro использует определенную структуру папок для вашего проекта. Корневая папка каждого проекта на Astro должна включать следующие директории и файлы:

- `src/*` — Исходный код вашего проекта (компоненты, страницы, стили, изображения и т.д.)
- `public/*` — Ваши статичные файлы, помимо кода (шрифты, иконки, и т.д.)
- `package.json` — Манифест проекта.
- `astro.config.mjs` — Файл конфигурации Astro. (рекомендован)
- `tsconfig.json` — Файл конфигурации TypeScript. (рекомендован)

### Пример дерева проекта

Структура простого Astro проекта может выглядеть так:

<FileTree>
- public/
  - robots.txt
  - favicon.svg
  - my-cv.pdf
- src/
    - blog/
      - post1.md
      - post2.md
      - post3.md
  - components/
    - Header.astro
    - Button.jsx
  - images/
    - image1.jpg
    - image2.jpg
    - image3.jpg
  - layouts/
    - PostLayout.astro
  - pages/
    - posts/
      - [post].astro
    - about.astro
    - **index.astro**
    - rss.xml.js
  - styles/
    - global.css
  - content.config.ts
- astro.config.mjs
- package.json
- tsconfig.json
</FileTree>

### `src/`

Папка `src/` – это место где живет большая часть вашего исходного кода. Здесь находятся:

- [Страницы](/ru/basics/astro-pages/)
- [Макеты](/ru/basics/layouts/)
- [Astro компоненты](/ru/basics/astro-components/)
- [Компоненты UI-фреймворков (React и т.д.)](/ru/guides/framework-components/)
- [Стили (CSS, Sass)](/ru/guides/styling/)
- [Markdown](/ru/guides/markdown-content/)
- [Изображения, для оптимизации и обработки с помощью Astro](/ru/guides/images/)

Astro обрабатывает, оптимизирует и объединяет в бандл ваши файлы из `src/`, чтобы создать окончательный сайт, который отправляется в браузер. В отличие от статической директории `public/`, файлы из `src/` собираются в билд и обрабатываются с помощью Astro.

Некоторые файлы (например, Astro-компоненты) не отправляются в браузер в том виде, в котором они написаны, а вместо этого отображаются статическим HTML. Другие файлы (такие как CSS) отправляются в браузер, но могут быть оптимизированы или объединены в бандл с другими CSS-файлами для производительности.

:::Tip
В этом руководстве описываются практики, которые общеприняты в сообществе Astro. Однако единственной зарезервированной директорией в Astro является `src/pages/`. Вы можете переименовывать любые другие директории и организовывать их так, как вам удобно.
:::

### `src/pages`

Чтобы задать маршруты страниц для вашего сайта, добавьте [файлы поддерживаемых типов](/ru/basics/astro-pages/#поддерживаемые-типы-файлов-страниц) в эту директорию.

:::Caution 
`src/pages` – это **обязательная** под-директория в вашем Astro-проекте. Без нее на вашем сайте не будет страниц и маршрутов!
:::

### `src/components`

**Компоненты** - это повторяющиеся блоки кода для ваших HTML-страниц. Это могут быть [компоненты Astro](/ru/basics/astro-components/) или [компоненты UI-фреймворка](/ru/guides/framework-components/) такие как React или Vue. Обычно принято группировать и упорядочивать все компоненты вашего проекта в этой папке.

Это общепринятая практика для Astro-проектов, но она не является обязательной. Вы вольны организовывать компоненты своего проекта так, как вам удобно!

### `src/layouts`

[Макеты](/ru/basics/layouts/) - это компоненты Astro, которые задают UI-структуру, используемую на одной или нескольких [страницах](/ru/basics/astro-pages/).

Как и `src/components`, эта директория является общепринятой, но не обязательной.

### `src/styles`

Общепринято хранить ваши CSS или Sass файлы в директории `src/styles`, но это не обязательно. Пока ваши стили находятся где-то внутри директории `src/` и правильно импортированы, Astro будет обрабатывать и оптимизировать их.

### `public/`

Директория `public/` предназначена для файлов и материалов в вашем проекте, которые Astro не должен обрабатывать во время сборки. Файлы в этой папке будут скопированы в папку сборки без изменений, после чего будет создан билд вашего сайт.

Это поведение делает `public/` идеальным местом для материалов, которые не нуждаются в обработке, например картинки и шрифты или специальные файлы, такие как `robots.txt` и `manifest.webmanifest`.

Вы можете поместить CSS и JavaScript в вашу директорию `public/`, но имейте в виду, что эти файлы не будут объединены в бандл или оптимизированы в вашей конечной сборке.

:::tip
Как правило, любой CSS или JavaScript, который вы пишете самостоятельно, должен находиться в директории `src/`.
:::

### `package.json`

Это файл, используемый менеджерами пакетов JavaScript для управления зависимостями. Он также определяет скрипты, которые обычно используются для запуска Astro (например, `npm run dev`, `npm run build`).

Вы можете указать [два вида зависимостей](https://docs.npmjs.com/specifying-dependencies-and-devdependencies-in-a-package-json-file) в файле `package.json`: `dependencies` и `devDependencies`. В большинстве случаев они работают одинаково:  Astro нуждается во всех зависимостях на этапе сборки, и ваш менеджер пакетов установит оба. Мы рекомендуем поместить все зависимости в `dependencies` для начала, и использовать `devDependencies` только при наличии конкретной необходимости.

Чтобы создать новый файл `package.json` для вашего проекта,  ознакомьтесь с инструкцией по [ручной установке](/ru/install-and-setup/#ручная-установка).

### `astro.config.mjs`

Этот файл создается в каждом стартовом шаблоне и включает в себя параметры конфигурации для вашего проекта Astro. Здесь вы можете указать используемые интеграции, параметры сборки, параметры сервера и многое другое.

Astro поддерживает несколько форматов файлов конфигурации JavaScript: `astro.config.js`, `astro.config.mjs`, `astro.config.cjs` и `astro.config.ts`. В большинстве случаев мы рекомендуем использовать `.mjs`, либо `.ts` если вы хотите писать конфигурации на TypeScript.

Загрузка файла конфигурации на TypeScript обрабатывается с помощью [`tsm`](https://github.com/lukeed/tsm) и будет учитывать настройку `tsconfig` вашего проекта.

См. [Руководство по настройке Astro](/ru/reference/configuration-reference/) для детальной настройки.

### `tsconfig.json`

Этот файл создается в каждом стартовом шаблоне и включает параметры конфигурации TypeScript для вашего Astro-проекта. Некоторые функции (такие как импорт пакетов npm) не полностью поддерживаются в редакторе без файла `tsconfig.json`.

См. [Руководство по TypeScript](/ru/guides/typescript/) для деталей по настройке конфигурации.
